<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      // const data = [
      //   {company:'阿里',type:'电子产品',sale:125},
      //   {company:'阿里',type:'服装',sale:352},
      //   {company:'阿里',type:'食品',sale:520},
      //   {company:'京东',type:'电子产品',sale:438},
      //   {company:'京东',type:'服装',sale:85},
      //   {company:'京东',type:'食品',sale:266},
      //   {company:'拼多多',type:'电子产品',sale:92},
      //   {company:'拼多多',type:'服装',sale:316},
      //   {company:'拼多多',type:'食品',sale:283},
      // ];

      const data = [
        {company:'阿里',电子产品:125,服装:352,食品:520},
        {company:'京东',电子产品:438,服装:85,食品:266},
        {company:'拼多多',电子产品:92,服装:316,食品:283}
      ]

      const keys = ['食品','电子产品','服装'];
      const stack = d3.stack()
        .keys(keys)
        .order(d3.stackOrderDescending)
        .offset(d3.stackOffsetDiverging)

      const array = stack(data) ;  

      const width = 800 ;
      const height = 600 ;
      const margin = 100 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");
      const g = svg.append('g').attr('transform',`translate(${margin},${margin})`)


      const x = d3.scaleBand()
        .domain(data.map(d=>d.company))
        .range([0,width - margin*2])  
        .padding(0.5)

      const y = d3.scaleLinear()
        .domain([0,d3.max(array.filter(d=>d.index==array.length-1)[0] ,d=>d[1] )])  
        .range([height-margin*2 , 0])
        .nice()

      const c = d3.scaleOrdinal()
        .domain(keys)  
        .range(d3.schemeSet2)


      g.selectAll('g')
       .data(array)
       .join('g')
       .attr('fill',d=>c(d.key))
          .selectAll('rect')
          .data(d=>d)
          .join('rect')
          .attr('x',d=>x(d.data.company))
          .attr('y',d=>y(d[1]))
          .attr('width',x.bandwidth())
          .attr('height',d=>y(d[0]) - y(d[1]))
          


      const xAxis = d3.axisBottom(x);
      g.append('g').attr('transform',`translate(0,${height-margin*2})`)
       .call(xAxis)


      const yAxis = d3.axisLeft(y)
      g.append('g')
       .call(yAxis)


      
      //颜色提示
      svg.append('g').attr('transform',`translate(650,400)`)
        .selectAll('g')
        .data(keys)
        .join('g')
        .call(g=>{
          g.append('rect')
            .attr('x',0)
            .attr('y',(d,i)=>i*30)
            .attr('width',50)
            .attr('height',25)
            .attr('fill',d=>c(d))
        })
        .call(g=>{
          g.append('text')
            .attr('x',60)
            .attr('y',(d,i)=>i*30+20)
            .text(d=>d)
            .attr('font-size',12)
        })
       
    </script>
  </body>
</html>
